<style scoped>
	h1{
		font-size:1.625rem;
		color:#333;
		text-align:center;
		font-weight: lighter;
	}
	#categories{
		padding-bottom:10rem;
	}
	#categories>p{
		font-size:12px;
		text-align:center;
		color:#999;
		margin-top:5px;
		margin-bottom:20px;
	}
	
	.wrap{
		border-left:2px solid #eee;
		padding-bottom:.5rem;
	}

	.container > h2{
		position:relative;
		padding-left:20px;
		transition:color .3s;
		font-weight: lighter;
		color:#333;
		line-height:2rem;
		margin-top:1rem;
	}
	.container > h2:active{
		background-color:transparent;
	}
	.container > h2:hover{
		color:#000;
		cursor: pointer;
	}
	.container > h2::before{
		transition:background-color .3s;
		top:calc(50% - 4px);
		left:-5px;
		position:absolute;
		content:'';
		width:8px;
		height:8px;
		background-color:#bbb;
		border-radius:50%;
	}
	.container > h2:hover:before{
		background-color:#222;
	}
	@keyframes ulShow{
		from{display:none;}
		to{display:block;}
	}
	ul{
		list-style: none;
	}
	ul > li > a{
		text-decoration: none;
		position:relative;
		padding-left:20px;
		line-height:4rem;
		display:inline-block;
		width:100%;
		color:#666;
		border-bottom:1px dashed #ccc;
		transition: border-bottom-color .3s,color .3s;
	}
	ul > li > a::before{
		transition:background-color .3s;
		top:calc(50% - 2px);
		left:-3px;
		position:absolute;
		content:'';
		width:4px;
		height:4px;
		background-color:#bbb;
		border-radius:50%;
	}
	ul > li > a:hover:before{
		background-color:#222;
	}
	ul > li > a:hover{
		color:#333;
		border-bottom-color:#666;
	}
</style>


<template>
	<div id='categories'>
		<h1>博客分类</h1>
		<p>目前共计{{categories.length}}个分类</p>
		<div class='wrap'>
			<div class='container' v-for='item in categories'>
				<h2 @click='item.isShow=!item.isShow'>{{item.tag}}</h2>
				<ul v-show='item.isShow'>
					<li v-for='i in item.articles'>
						<router-link v-text='i.title' :to="path+'/'+item.tag+'/'+i.id"></router-link>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>


<script>
	export default{
		data(){
			return{
				path:this.$route.path,
				categories:[]
			}
		},
		mounted() {
			document.title="Joey Wong's Blog-Categories";
			const that = this;
            this.$http.get(
            	that.surl+this.$route.path
            )
	        .then(function (response) {
	        	if(response.data!==false){
		        	response.data.forEach(function(val){
					  	val.isShow=false;
				    });
				    that.categories = response.data;		
	        	}else{
              		that.$router.push('/404');
	        	}

	        })
	        .catch(function (error) {
	            that.$router.push('/404');
	        });
        }
	}
</script>